<template>
  <div>

    <el-card class="box-card" style="margin: 10px 0px">
      <div slot="header" class="clearfix">
        <!-- 头部左侧内容 -->
        <el-tabs class="tab" v-model="activeName">
          <el-tab-pane label="成绩分布" name="overall"></el-tab-pane>
          <el-tab-pane label="单题统计" name="special"></el-tab-pane>
        </el-tabs>
        <!-- 头部右侧内容 -->
        <div class="right">
          <span v-if="this.activeName=='special'">第{{cardItem.tiNumber}}题</span>
          <el-button v-if="this.showPrevious&&this.activeName=='special'" type="primary" size="mini" @click="handPrevious()">上一题</el-button>
          <el-button v-if="this.showNext&&this.activeName=='special'" type="primary" size="mini" @click="handNext()">下一题</el-button>
          <el-button v-if="this.activeName=='special'" type="primary" size="mini" @click="showDetail()">题目详情</el-button>
          <el-button type="primary" size="mini" @click="sortButton()">排序</el-button>
        </div>
      </div>
      <div>
        <el-row :gutter="10">
          <el-col :span="18">
            <!-- 容器 -->
            <div class="charts" ref="charts"></div>
          </el-col>
          <el-col :span="6" class="right">
            <h3>排名</h3>
            <ul>
              <li>
                <span class="rindex">1</span>
                <div v-if="this.rankingData[0]!=null">
                  <span >{{this.rankingData[0].name}}</span>
                  <span class="rvalue">{{this.rankingData[0].studentConnection.totalScore}}</span>
                </div>
              </li>
              <li>
                <span class="rindex">2</span>
                <div v-if="this.rankingData[1]!=null">
                  <span >{{this.rankingData[1].name}}</span>
                  <span class="rvalue">{{this.rankingData[1].studentConnection.totalScore}}</span>
                </div>
              </li>
              <li>
                <span class="rindex">3</span>
                <div v-if="this.rankingData[2]!=null">
                  <span >{{this.rankingData[2].name}}</span>
                  <span class="rvalue">{{this.rankingData[2].studentConnection.totalScore}}</span>
                </div>
              </li>
              <li>
                <span class="rindex2">4</span>
                <div v-if="this.rankingData[3]!=null">
                  <span >{{this.rankingData[3].name}}</span>
                  <span class="rvalue">{{this.rankingData[3].studentConnection.totalScore}}</span>
                </div>
              </li>
              <li>
                <span class="rindex2">5</span>
                <div v-if="this.rankingData[4]!=null">
                  <span >{{this.rankingData[4].name}}</span>
                  <span class="rvalue">{{this.rankingData[4].studentConnection.totalScore}}</span>
                </div>
              </li>
              <li>
                <span class="rindex2">6</span>
                <div v-if="this.rankingData[5]!=null">
                  <span >{{this.rankingData[5].name}}</span>
                  <span class="rvalue">{{this.rankingData[5].studentConnection.totalScore}}</span>
                </div>
              </li>
              <li>
                <span class="rindex2">7</span>
                <div v-if="this.rankingData[6]!=null">
                  <span >{{this.rankingData[6].name}}</span>
                  <span class="rvalue">{{this.rankingData[6].studentConnection.totalScore}}</span>
                </div>
              </li>
            </ul>
          </el-col>
        </el-row>
      </div>
    </el-card>

    <el-dialog title="题目详情" :visible.sync="dialogTableVisible" width="70%">
      <el-divider><span style="color: rgb(239,160,48)">(分值：{{cardItem.score}})</span></el-divider>
      <p class="title">第{{cardItem.tiNumber}}题</p>
      <span class="title" v-html="cardItem.name" style="margin: 20px"></span>
      <br>
      <br>
      <p>参考答案：</p>
      <span v-html="cardItem.answer?cardItem.answer.replace(/duang/g, ''):'无参考答案'" style="margin: 20px"></span>
    </el-dialog>

    
  </div>

</template>

<script>
//引入echarts
import echarts from 'echarts';
export default {
  name:'',
  props:['examInfo'],
  data() {
    return {
      activeName:'overall',
      myCharts:null,
      // 总体成绩数组
      overallData:[],
      // 总体成绩图
      option1:{
        title: {
          text: "成绩分布",
        },
        color:['#5470c6'],
        xAxis: {
          type: 'category',
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [],
            type: 'line'
          }
        ]
      },
      // 单题成绩
      option2:{
        title: {
          text: "单题成绩",
        },
        color:['#5470c6'],
        xAxis: {
          type: 'category',
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [],
            type: 'line'
          }
        ]
      },
      // 用于排名的数组
      rankingData:[],
      // 升降序的标准
      sortFlag:true,
      //上一道题，下一道题按钮显示问题
      showPrevious: false,
      showNext: true,
      // 当前答题卡
      cardItem: {},
      // 当前单个题目index
      currentQuestion:0,
      // 题目总数组
      allItem:[],
      // 试卷信息
      paperData: {},
      // 存储一下题型字典
      typeList:[],
      // 显示弹窗
      dialogTableVisible:false,
      // 单题分数数组
      singleData:[],
      
    }
  },
  mounted() {
    this.getTypeList();
    //初始化echarts实例
    this.mycharts = echarts.init(this.$refs.charts);
  },
  methods: {
    // 展示题目详情
    showDetail(){
      this.dialogTableVisible = true;
    },
    // 通过题目选项卡切换，趁机保存答案
    handSave(item) {
      // 第一题，不显示pre按钮
      if (item.id === this.allItem[0].id) {
        this.showPrevious = false
      } else {
        this.showPrevious = true
      }

      // 最后一个索引
      const last = this.allItem.length - 1
      // 最后一道题，应该不能有next按钮
      if (item.id === this.allItem[last].id) {
        this.showNext = false
      } else {
        this.showNext = true
      }
      
      // 切换当前显示题目的内容
      this.fetchData(item);
      
    },
    // 下一道题响应函数
    handNext(){
      const index = this.cardItem.tiNumber
      this.currentQuestion++
      this.handSave(this.allItem[index])
    },
    // 上一道题响应函数
    handPrevious(){
      const index = this.cardItem.tiNumber - 2
      this.currentQuestion--
      this.handSave(this.allItem[index])
    },
    // 获得题型字典
    async getTypeList() {
      //获取专业分类的请求，不需要携带参数
      let result = await this.$API.gradeStatistics.reqGetTypeList();
      if(result.code==20000){
        this.typeList = result.data.typeList;
      }
    },
    // 拿一道题目
    fetchData(item){
      // 获得详情
      this.cardItem = item;
      this.getSingleQuestionGrade();
      this.mycharts.setOption(this.option2);
    },
    // 获取试卷的所有题目信息
    async getQuestions(){
      let result = await this.$API.gradeStatistics.getPaperInventory(this.examInfo.paperId);
      if(result.code==20000){
        this.paperData = result.data.question;
        // 获得第一题内容
        for(var i=0;i<this.typeList.length;i++){
          // 获取键key
          var key = this.typeList[i].id;
          // 寻找第一个有题目的题目类型
          if (this.paperData[key]) {
            this.cardItem = this.paperData[key][0];
            break;
          }
        }

        // 想要保存所有题目
        const that = this
        // 这么做的无奈之处是，马子说题型万一动起来了咋办，键key我假装不知道，循环处理
        var indexNum = 1;
        for(var i=0;i<this.typeList.length;i++){
          // 获取键key
          var key = this.typeList[i].id;
          if(this.paperData[key]){
            this.paperData[key].forEach(function(item) {
              that.allItem.push(Object.assign(item,{tiNumber:indexNum}));
              indexNum++;
            })
          }
        }

        // 逻辑上这时去渲染题目
        this.fetchData(this.cardItem);
      }
    },
    // 排序按钮功能
    sortButton(){
      this.sortFlag = !this.sortFlag;
      this.sortRanking();
    },
    // 排序功能
    sortRanking(){
      var that = this;
      this.rankingData.sort(function(a,b){
        if(!that.sortFlag){
          return a.studentConnection.totalScore - b.studentConnection.totalScore;
        }else{
          return b.studentConnection.totalScore - a.studentConnection.totalScore;
        }
      });
    },
    // 获得所有学生信息与成绩
    async getAllStudentInfo(){
      let params = {
        examId:this.examInfo.id,
        isMarked:null,
      }
      let result = await this.$API.gradeStatistics.getAllStudentForExam(params);
      if(result.code==20000){
        this.rankingData = result.data.rows;
        this.sortRanking();
      }
    },
    // 计算总体成绩分布
    async getOverallGrade(){
      let result = await this.$API.gradeStatistics.queryNumberOfPerScore(this.examInfo.id);
      if(result.code==20000){
        this.overallData = [];
        var array = result.data.result;
        for(var i=0;i<array.length;i++){
          var item = array[i];
          // 计算成绩数组
          var arr = [item.score,item.number];
          this.overallData.push(arr);
        }
        this.option1.series[0].data = this.overallData;
      }
    },
    // 获得单题得分情况
    async getSingleQuestionGrade(){
      let result = await this.$API.gradeStatistics.getStatisticalOfOnePaperQuestion(this.cardItem.id);
      if(result.code==20000){
        this.singleData = [];
        var array = result.data.result;
        for(var i=0;i<array.length;i++){
          var item = array[i];
          // 计算成绩数组
          var arr = [item.score,item.number];
          this.singleData.push(arr);
        }
        this.option2.series[0].data = this.singleData;
      }
    },
  },
  //监听属性
  watch: {
    activeName() {
      console.log("修改配置数据");
      //重新修改图标的配置数据
      //图标配置数据可以再次修改，如果有新的数值，新的数值，没有新的数值，还是用以前的
      if(this.activeName=='overall'){
        // 总体成绩
        this.mycharts.setOption(this.option1);
      }else if(this.activeName=='special'){
        // 单科成绩
        this.getSingleQuestionGrade();
        this.mycharts.setOption(this.option2);
      }
    },
    // 获得信息,需要做的事情
    examInfo(){
      this.getOverallGrade();
      this.getAllStudentInfo();
      this.getQuestions();
      this.mycharts.setOption(this.option1);
    },
  },
}
</script>

<style scoped>
.clearfix {
  position: relative;
  display: flex;
  justify-content: space-between;
}
.tab {
  width: 100%;
}
.right {
  position: absolute;
  right: 0px;
}
.charts {
  width: 98%;
  height: 300px;
}
ul {
  list-style: none;
  width: 100%;
  height: 300px;
  padding: 0px;
}
ul li {
  height: 8%;
  margin: 10px 0px;
}
.rindex {
  float: left;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: black;
  color: white;
  text-align: center;
}
.rindex2 {
  float: left;
  width: 20px;
  height: 20px;
  text-align: center;
}
.rvalue {
  float: right;
}
.right span {
  margin: 0px 10px;
}
.title{
  font-size: 19px;
  font: bold;
}
</style>